<template>
  <div class="newLogBase">
    <div class="contBox">
      <div class="leftBox">
        <h2>欢迎来到{{ logoInfo.substationName || '求礼品' }}</h2>
        <h3>我们提供赠品采购、发货、一站式服务。</h3>
        <div class="line">
          <span v-for="(item, index) in loginArr" :key="index" :class="{ 'active': (item == $route.name) || ($route.name == 'forget' && index == 0) }"></span>
        </div>
        <slot name="box" class="box"></slot>
      </div>
      <div class="rightImg">
        <img src="../../../assets/images/reg/登录_插图.png" alt="png">
    </div>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'newLogBase',
  data () {
    return {
      loginArr: ['login', 'reg']
    }
  },
  computed: {
    ...mapGetters([
      'logoInfo'
    ])
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.newLogBase
  width 100%
  height 100%
  position relative
  background #FCFCFC
  .contBox
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    margin auto
    width 1000px
    height 600px
    background #ffffff
    box-shadow 0 2px 38px RGBA(241, 101, 145, 0.05)
    display flex
    .leftBox
      flex 1
      padding-left 35px
      padding-top 40px
      // padding 100px 130px 0
      >h2
        font-size 28px
        line-height 40px
        color #333333
        font-weight bold
        margin-bottom 10px
      >h3
        font-size 16px
        line-height 20px
        color #333333
        margin-bottom 20px
      .line
        display flex
        margin-bottom 20px
        span
          width 56px
          height 3px
          border-radius 4px
          background #dddddd
          margin-right 6px
          cursor pointer
        .active
          background #D0507D
    .rightImg
      width 444px
      img
        width 100%
</style>
